.traffic-flow-prediction {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
 
  &.no-responsive-scale {
    transform-origin: top left;
  }

  .traffic-flow-prediction-content {
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    // margin:3px 8px 0px 1px;  
    
    gap: 10px;
    background: linear-gradient(
      180deg,
      #14191F 0%,
      #3C4249 100%
    ),
    linear-gradient(
      178deg,
      rgba(9, 11, 13, 0) 0%,
      #26394D 100%
    ),
    radial-gradient(
      185% 43% at 53% -3%,
      rgba(166, 213, 255, 0.5) 0%,
      rgba(166, 209, 255, 0) 24%,
      rgba(179, 212, 255, 0) 100%
    );
    border: 0px solid rgba(77, 89, 102, 0.25);
    border-radius: 8px; 
 

    // 数据统计区域
    .data-stats-section {
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      margin: 8px 0;
      
      // 确保 DataStats 组件在这个容器内正确显示
      .data-stats {
        max-width: 100%;
      }
    }

    .forty-eight-hour-section {
      flex-shrink: 0;
      padding: 0px 12px;
    }

    .chart-section {
      flex: 1;
      min-height: auto;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      padding-bottom: 20px;
      
      > div {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }

/*   @media screen and (max-width: 1920px) {
    transform: scale(0.4862); // 1920/3952 ≈ 0.4862
    transform-origin: top left;
  }

  @media screen and (max-width: 1080px) {
    transform: scale(0.2733); // 1080/3952 ≈ 0.2733
    transform-origin: top left;
  }

  @media screen and (min-width: 5120px) {
    transform: scale(1.7778); // 5120/3952 ≈ 1.2955
    transform-origin: top left;
  } */


  // 响应式适配
 @media (max-width: 768px) {
    width: 100%;
    min-width: 320px;
  /*   
    .traffic-flow-prediction-content {
      .data-stats-section {
        .data-stats {
          width: 100%;
          max-width: 400px;
          
        }
      }
    } */
  } 

  // 数据更新动画
  .data-updating {
    .data-stats {
      animation: dataFlash 0.5s ease-in-out;
    }
  }

  @keyframes dataFlash {
    0% { opacity: 1; }
    50% { opacity: 0.5; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
  }
}